<template>
	<view class="package-content">
		<view class="package">
			<view class="package-item" v-for="(item, index) in packageOptions" :key="index" @click="itemClick(item)">
				<view class="package-item-icon"><up-icon :name="item.icon" size="19"></up-icon></view>
				<view class="package-item-title">{{ item.title }}</view>
				<view class="package-item-right">
					<u-icon name="arrow-right" class="package-item-right-icon"></u-icon>
				</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="unsubscribe-view"><view class="text-view" @click="unsubscribe">注销账户</view></view>
		<!-- #endif -->
		<PopNormal ref="popNormal" title="提醒" :confirmText="currentPopInfo.sureText" :content="currentPopInfo.content" @confirm="handleConfirm" />
	</view>
</template>

<script>
import PopNormal from '@/components/pop-normal';
import { packageOptions } from '@/utils/options/mine/index.js';
import { version } from '@/utils/config.js';
import { getToken, formatCount ,showToast } from '@/utils/common.js';

import useUserStore from "@/store/user.js";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore); // 响应式
const { getUserInfo ,LogOut} = userStore; // actions
export default {
	components: {
		PopNormal
	},
	props: {
		
	},
	data() {
		return {
			formatCount,
			packageOptions,
			version,
			showConfirm: false,
			current: 0
		};
	},
	computed: {
		popInfo() {
			return [
				{ sureText: '退出', content: '确定要退出登录吗？', tip: '已经退出' },
				{ sureText: '注销帐号', content: '您正在申请注销木工宝典账号，注销后，您的会员特权，个人数据将会失效，且不可恢复。确定注销吗？', tip: '账户已注销' }
			];
		},
		currentPopInfo() {
			return this.popInfo[this.current];
		}
	},
	methods: {
		itemClick(item) {
			if (item.title === '退出登录') {
				if (getToken()) {
					this.current = 0;
					// this.showConfirm = true;
				this.$refs.popNormal.changeVisibleValue(true)

				}
			} else if (item.path) {
				let params={}
				if(item.title==='提交需求与公式'){
					params.sketchTitle="我的-提交公式"
				}
				this.$u.route({
					url: item.path,
					params
				});
			}
		},
		handleConfirm() {
			LogOut()
			uni.$emit("records-list")
			showToast(this.currentPopInfo.tip, true);
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1500);
		},
		unsubscribe() {
			if (getToken()) {
				this.current = 1;
				this.$refs.popNormal.changeVisibleValue(true)
				// this.showConfirm = true;

			}
		}
	}
};
</script>

<style lang="scss" scoped>
.package-content {
	padding-bottom: 24upx;
}
.package {
	background: #ffffff;
	border-radius: 16upx;
	padding: 0 24upx;
	width: 100%;
	.package-item {
		height: 110upx;
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 2px solid #f6f7fa;
		&:last-child {
			border-bottom: none;
		}
		.package-item-icon {
			width: 40upx;
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 38upx;
			margin-right: 12upx;
			margin-top: 4rpx;
		}
		.package-item-title {
			font-size: 28upx;
			font-weight: bold;
			color: #3d3f4d;
		}
		.package-item-right {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			color: #8d8d8d;
			&-text {
			}
			.dot {
				&::before {
					content: ' ';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #fc524d;
					right: 30rpx;
					top: 0;
					z-index: 1;
				}
			}
			.package-item-right-icon {
				margin-left: 16upx;
			}
		}
	}

	.package-item-circle {
		width: 12upx;
		height: 12upx;
		border-radius: 50%;
		background-color: #ff3b30;
		position: absolute;
		top: 0;
		right: 20upx;
	}
}
.unsubscribe-view {
	margin-top: 54rpx;
	margin-bottom: 34rpx;
	color: #666666;
	text-align: center;
	font-size: 28rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.text-view {
		width: 160rpx;
		height: 80rpx;
	}
}
</style>
